<template>
    <div>
        <div class="box">
            <h1>学生信息平台登录</h1>
            <div>
                <el-input placeholder="请输入用户名" v-model="form.name" clearable>
                </el-input><br>
                <el-input placeholder="请输入密码" v-model="form.password" show-password></el-input>
            </div>
            <el-row>
                <p>没有账号？</p>
                <el-button type="danger" @click="onlogin">登录</el-button>
                <el-button type="primary" @click="goRegister">立即注册</el-button>
            </el-row>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            form: {
                name:'',
                password:''
            }
        }
    },
    methods:{
        onlogin(){
            this.$store.dispatch('login_a',{
                user_name: this.form.name,
                password:this.form.password,
                routerT:this.$router
            })
        },
        goRegister(){
            this.$router.push({
                name:'register'
            })
        }
    }

}
</script>

<style lang="scss" scoped>
.box {
    height: 610px;
    background-image: url('~@a/img/bg.webp');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0.7;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    .el-input {
        width: 300px;
        margin: 10px;
    }

    .el-row {
        .el-button {
            width: 100px;
            margin: 0 20px;
        }

    }

    p {
        font-size: 12px;
        color: red;
        font-weight: bolder;
        margin-left: 180px;
    }
}
</style>